@import "../../style/_vars";
@import "../../style/mixin";
@import "../../assets/icons/iconfont.css";
.clearfix {
  @include clearfix  
}
/*div,ul,li,h1,h2,h3,h4{
  box-sizing:border-box;
}
p,ul,li{
  margin:0;
  padding:0;
}*/

/*页内公共样式*/


// 多媒体轮播图 （旧的布局交互方式）
.media-wrap{
  position:relative; 
  height:0;
  padding-top: 78.4%;  
  width:100%; 
  .swiper-wrap, .video-wrap{
    position: absolute;
    left:0; right:0; top:0; bottom:0;
    z-index: 2;
  }
  .video-wrap{
    background: blue;
  }
  .toggle-wrap{
    position: absolute;
    left:0; right:0; bottom:15px;
    text-align: center;
    z-index: 4;
    .toggle-btn{
      display: inline-block;
      line-height: 1.6;
      padding:0 10px;
      color: white;
      border-radius:12px;
      color:white;
      border:none;
      color:#333333;
      background: #eff3f8;
    }.activate{
      color:white;
      background: linear-gradient(right,#6dbcf8,#1689e0);
    }
  } 
} 

// 案情细节
.case-desc {
  padding:0px 10px;
  background: #ffffff;
  margin-bottom:8px;
  &__head { 
    display:flex;
    flex-flow: row nowrap;
    align-items: center;
    padding: 3px 0; 
    h3 {
      margin:0;padding:0;
      flex: 1;
      @include ellipsis(0)
      color:black; 
    }
    span {
      flex: 0 0 auto;
      padding-left:10px;
    }
  }
  &__state {
    font-size:12px;
    color:white;
    .case{
      float:left;
      display:inline-block;
      margin:0 10px 5px 0;
      line-height:1.8em;
      padding:0 8px;
      border-radius:5px;
      background:#CDCBD0;
    }
    .case.ajlb{
      background:#F66500;
    }
    .case.xalb{
      background:#F66500;
    }
    .case.ajzt{
      background:#4C8CF5;
    }
  }
  &__content {
    font-size:1rem; //14px;
    .content-data{
      color:black; 
      max-height: calc( (1.43rem + 8px ) * 3 + 1.43rem * 3 - 8px); //
      //max-height:1000px;  // 切换样式
      overflow:hidden; 
      .item{
        line-height: 1.43rem;
        margin:4px 0;
        em{
          color: gray;
          margin-right:5px;
          font-style:normal;
        }
        em:after{
          text-align:right; 
          content: ' :'; 
        } 
      }
      .item.multi-line{
        display: -webkit-box;
        //display: block; // 切换样式
        text-overflow: ellipsis;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;

      }
    }
    #descShowToggle:checked + .content-data {
      max-height:1000px;
      .item.multi-line{
        display: block;
      }
    }
    .content-toggle{
      display:block;
      text-align: center;
      line-height:2em;
      .close {display:none}
    }
    #descShowToggle:checked ~ label.content-toggle{
      .open {display:none}
      .close {display:block}
    }
  }


}

// 侦查阶段
.case-process{
  font-size:1rem;
  background: white;
  margin-bottom:8px;
  &__title{
    line-height:3;
    text-align:center;
    color:white;
    background:#5179ac;
  }
}

// 案件特征
.case-character{
  font-size:1rem;
  background: #ffffff;;
  margin-bottom:8px; 
}

// 警情
.case-info{
  font-size:1rem;
  background: #ffffff;
  margin-bottom:8px; 
}

// 现场勘查
.spot-info{
  font-size:1rem;
  background: #ffffff;
  margin-bottom:8px;
  &__group{
    margin-bottom: 5px;
    border-bottom:2px solid #f7f7f7;
  }
  
  &__tool{
    display:flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    padding:0 0 0.5rem 0;
    margin: 15px 0 0px 0;
    .link{
      flex: 0 0 11.5%;
      width: 11.5%;
      text-align:center;
      .icon{
        position:relative;
        height:0px;
        padding-top:100%; 
        background:no-repeat;
        background-size:contain;
        background-position:center center;
        .badge{
          position:absolute;
          right:10px;
          top:0;
          transform:translate3d(50%,-50%,0);
        }
      }
    }
  } 
}

// 涉案人员
.person-info{
  font-size:1rem;
  background: #ffffff;
  margin-bottom:8px;
  &__group{
    .person-list{
      padding-left: 2.2rem;
      padding-right: 0.5rem;
      .person-item{
        padding-top:3px;
        &__title { 
          color: #333;
          font-size: 1rem;
          font-weight: bold;
          .name{
            font-size: 1.1rem;
            vertical-align: middle;
          }
          .tip {
            font-size: .8rem;
            background: #4c81e3;
            padding: 0 0.5rem;
            color: #fff;
            font-weight: normal;
            border-radius: .2rem;
            vertical-align: middle;
          }
        } 
        &__tags {
          margin-top:-3px;
          span.tag {
            display:inline-block;
            font-size: .8rem;
            background:  #ff6600; //#cccccc;
            padding: 0 0.5rem;
            color: #fff;
            font-weight: normal;
            border-radius: .2rem;
            margin: 0 .2rem .2rem 0;
            &.activate {
              background: #ff6600;
            } 
          }
        }
      }
    }
    
  }
}

// 涉案物件
.object-info{
  font-size:1rem;
  background: #ffffff;
  margin-bottom:8px;
  .object-list{
    padding-left: 2.2rem;
    padding-right: 0.5rem;
    strong.name{
      font-size: 1.1rem;
    }
  }
}

// 涉案单位
.organize-info{
  font-size:1rem;
  background: #ffffff;
  margin-bottom:8px;
}

// 线索信息
.intelligence-info{
  font-size:1rem;
  background: #ffffff;
  margin-bottom:8px;
  &__group{
    .system-info{  // 系统推送组
      padding-left: 2.2rem;
      padding-right: 0.5rem;
      color: #72778D;
      // 新公共样式调整
      .badge{
        position:absolute;
        right:0.5rem;
        top:0.5rem;
      }
      // 业务元素 样式
      .tech-compare{  // 技术对比
        &__info{
          font-size: 1rem;
          line-height: 1.4;
          padding: 0.6rem 0;
          .grid-item.hide{
            display: none; 
          }
          .tag{
            display:inline-block;
            padding:0 5px;
            font-weight:normal;
            color:white;
            font-size:0.6rem; 
            background:orange;
            margin-left:3px;
            border-radius:8px;
          }

          .content-toggle{
            display:block;
            text-align: center;
            line-height:2em;
            .close {display:none}
          } 
          #techCompareToggle:checked ~ .info-grid>.grid-item.hide{
            display:flex;
          }
          #techCompareToggle:checked ~ label.content-toggle{
            .open {display:none}
            .close {display:block}
          } 
        }
      }
      .joint-case{  // 串并案
        &__info{
          font-size: 1rem;
          padding: 0.6rem 0; 
          overflow: hidden;
          p{
            margin-bottom: 3px; 
          }
          p.hide{
            display: none; 
          }
          .span{ 
            display: inline-block; 
          } 
          .tag{
            display:inline-block;
            padding:0 5px;
            font-weight:normal;
            color:white;
            font-size:0.6rem; 
            background:orange;
            margin-left:3px;
            border-radius:8px;
          }
        }
        .content-toggle{
          display:block;
          text-align: center;
          line-height:2em;
          .close {display:none}
        } 
        #jointCaseToggle:checked ~ p.hide{
          display:block
        }
        #jointCaseToggle:checked ~ label.content-toggle{
          .open {display:none}
          .close {display:block}
        }  
      }
      .record-ratio{
        &__info{
          padding: 0.6rem 0;
          .info-item{
            padding:5px 0;
            border-bottom: 1px solid #e9e9e9; 
          }.hide{
            display:none;
          }

          .content-toggle{
            display:block;
            text-align: center;
            line-height:2em;
            .close {display:none}
          } 
          #recordRatioToggle:checked ~ .info-item.hide{
            display:block
          }
          #recordRatioToggle:checked ~ label.content-toggle{
            .open {display:none}
            .close {display:block}
          }
        } 
      }
    }
    
    .manual-info{  // 人工调查组
      padding-left: 2.2rem;
      padding-right: 0.5rem;
      .info-item{
        &__title{
          strong.name{
            font-size: 1rem;
            vertical-align: middle;
          }
          .tip {
            display: inline-block;
            font-size: .8rem;
            background: red;
            padding: 0 .3rem;
            color: #fff;
            font-weight: normal;
            border-radius: .2rem;
            vertical-align: middle;
          } 
        }
        &__tags { 
          margin-top:-2px;
          span.tag { 
            display: inline-block;
            font-size: .8rem; 
            background: #cccccc;
            padding: 0 .3rem;
            color: #fff;
            font-weight: normal;
            border-radius: .1rem;
            margin: 0 .2rem .2rem 0;
            &.activate {
              background: #ff6600;
            } 
          }
        }
      } 
       
    }
  }
}